import {OverviewMap, ScaleLine, ZoomSlider} from "ol/control";
import GeoJSON from "ol/format/GeoJSON";
import {drawVectorLayer, TdImgLayer} from "@/pages/Mymap/layers";
import {View} from "ol";
// @ts-ignore
import Toggle from "ol-ext/control/Toggle";
import Button from "ol-ext/control/Button";
import EditBar from "ol-ext/control/EditBar";
import Tooltip from "ol-ext/overlay/Tooltip"
import Notification from "ol-ext/control/Notification"
import {createGeomFromGeoJson} from "@/services/mymap/mymap";


export const scaleLineControl = new ScaleLine({
  // 设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
  units: 'metric',
});
export const zoomsliderControl = new ZoomSlider();

export const overviewMapControl = new OverviewMap({
  layers: [TdImgLayer],
  collapseLabel: '\u00BB',
  label: '\u00AB',
  collapsed: false,
  view: new View({
    projection: 'EPSG:4326',
    minZoom: 1,
  }),
});



export const saveControl = new Button({
  html: '<i class="fa fa-download"/>',
  className: "save",
  title: "Save",
  handleClick() {
    console.log("save");
    const features = drawVectorLayer.getSource().getFeatures();
    for (let i = 0; i <features.length ; i++) {
      const feature = features[i];
      const json = new GeoJSON().writeGeometry(feature.getGeometry())
      createGeomFromGeoJson(json);
    }
    // const json = new GeoJSON().writeFeatures(drawVectorLayer.getSource().getFeatures());
    // console.log(json);
    // createGeomFromGeoJson(json);
  }
});




export const noteControl = new Notification();


// Add the editbar
export const editBarControl = new EditBar({
  source: drawVectorLayer.getSource()
});


// Add a tooltip
export const tooltipOverlay = new Tooltip();


editBarControl.getInteraction('Select').on('select', function(e){
  if (this.getFeatures().getLength()) {
    tooltipOverlay.setInfo('Drag points on features to edit...');
  }
  else tooltipOverlay.setInfo();
});
editBarControl.getInteraction('Select').on('change:active', function(e){
  tooltipOverlay.setInfo('');
});
editBarControl.getInteraction('ModifySelect').on('modifystart', function(e){
  if (e.features.length===1) tooltipOverlay.setFeature(e.features[0]);
});
editBarControl.getInteraction('ModifySelect').on('modifyend', function(e){
  tooltipOverlay.setFeature();
});
editBarControl.getInteraction('DrawPoint').on('change:active', function(e){
  tooltipOverlay.setInfo(e.oldValue ? '' : 'Click map to place a point...');
});
editBarControl.getInteraction('DrawLine').on(['change:active','drawend'], function(e){
  tooltipOverlay.setFeature();
  tooltipOverlay.setInfo(e.oldValue ? '' : 'Click map to start drawing line...');
});
editBarControl.getInteraction('DrawLine').on('drawstart', function(e){
  tooltipOverlay.setFeature(e.feature);
  tooltipOverlay.setInfo('Click to continue drawing line...');
});
editBarControl.getInteraction('DrawPolygon').on('drawstart', function(e){
  tooltipOverlay.setFeature(e.feature);
  tooltipOverlay.setInfo('Click to continue drawing shape...');
});
editBarControl.getInteraction('DrawPolygon').on(['change:active','drawend'], function(e){
  tooltipOverlay.setFeature();
  tooltipOverlay.setInfo(e.oldValue ? '' : 'Click map to start drawing shape...');
});
editBarControl.getInteraction('DrawHole').on('drawstart', function(e){
  tooltipOverlay.setFeature(e.feature);
  tooltipOverlay.setInfo('Click to continue drawing hole...');
});
editBarControl.getInteraction('DrawHole').on(['change:active','drawend'], function(e){
  tooltipOverlay.setFeature();
  tooltipOverlay.setInfo(e.oldValue ? '' : 'Click polygon to start drawing hole...');
});
editBarControl.getInteraction('DrawRegular').on('drawstart', function(e){
  tooltipOverlay.setFeature(e.feature);
  tooltipOverlay.setInfo('Move and click map to finish drawing...');
});
editBarControl.getInteraction('DrawRegular').on(['change:active','drawend'], function(e){
  tooltipOverlay.setFeature();
  tooltipOverlay.setInfo(e.oldValue ? '' : 'Click map to start drawing shape...');
});


editBarControl.on('info', function(e){
  console.log(e)
  noteControl.show(`<i class="fa fa-info-circle"/> ${e.features.getLength()} feature(s) selected`);
});



